<template>
  <div>
    <!-- 折叠面板效果 + 手风琴 accordion -->
    <el-collapse v-model="activeNames" @change="handleChange" accordion>
      <el-collapse-item v-for="item in items" :key='item.id' :title='item.title'>
        <div v-for="(c,index) in items" :key="c.index">{{c.content}}</div>
      </el-collapse-item>
    </el-collapse>
  </div>


</template>

<script>
  export default {
    data() {
      return {
        activeNames: ['1'],
        items: [{
            id: '1',
            title: '一致性 Consistency',
            content: '与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。'
          },
          {
            id: '2',
            title: '反馈 Feedback',
            content: '与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。'
          },
          {
            id: '3',
            title: '效率 Efficiency',
            content: '与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。'
          },
          {
            id: '4',
            title: '可控 Controllability',
            content: '与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。'
          },
        ]
      };
    },
    methods: {
      handleChange(val) {
        console.log(val);
      }
    }
  }
</script>

<style>
</style>
